
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点管理</title>
</head>
<body>
    <!-- <div id="app">
        houdunren.com
    </div> -->

    <!-- <h1>houdunren.com@h1</h1>
    <h2>hdcms@h2</h2> -->

    <div id="app">
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="hdcms">hdcms.com</div>
    </div>


    <script>
        // let app = document.querySelector('#app');
        //给当前元素节点内容的最后面添加元素或者内容
        // app.append('-hdcms.com');


        //同时添加多个内容，包括字符串与标签元素
        //append中可以传递多个参数,包括字符串和标签,最终都是按照顺序追加到当前元素的后面
        // let app = document.querySelector('#app');
        // let h1 = document.createElement('h1');
        // h1.append('后盾人');
        // app.append('@',h1,'aaa');


        //将标签替换为新内容
        //将app标签以及内容替换成h1
        // let app = document.querySelector(`#app`);
        // let h1 = document.createElement('h1');
        // h1.append('hdcms.com');
        // app.replaceWith(h1);


        //添加新元素h1到目标元素div#app里面
        // let app = document.querySelector('#app');
        // let h1 = document.createElement('h1');
        // h1.innerHTML = 'houdunren';
        // app.append(h1);


        //将h2移动到h1的前面
        // let h1 = document.querySelector('h1');
        // let h2 = document.querySelector('h2');
        // h1.before(h2);

        //使用remove方法可以删除节点
        // let app = document.querySelector('#app');
        // app.addEventListener('click',() => {
        //     app.remove();
        // });


        //insertAdjacentHTML
        //再div#app前面添加html文本
        // let app = document.querySelector(`#app`);
        // let span = document.createElement('span');
        // //beforebegin 元素本身前面
        // //afterend    元素本身后面
        // //afterbegin   元素内部前面
        // //beforeend    元素内部后面
        // app.insertAdjacentHTML('beforeend','<h1>后盾人</h1>');


        //insertAdjacentElement
        // let app = document.querySelector('#app');
        // let span = document.createElement('span');
        // span.innerHTML = '后盾人1';
        // app.insertAdjacentElement('beforeend',span);

        
        




        
    </script>
</body>
</html>